<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 30px">
        <div style="display: flex;align-items: center;justify-content: center;width: 100%">
          <el-row :gutter="10">
            <el-col :span="5">
              <div style="margin: 5px">目的地</div>
              <el-autocomplete
                  class="inline-input"
                  v-model="cityKeyword"
                  :fetch-suggestions="querySearchCity"
                  placeholder="城市"
                  @select="handleSelectCity"
                  style="margin-bottom: 5px"
              ></el-autocomplete>
            </el-col>
            <el-col :span="9">
              <div style="margin: 5px">预约时间</div>
              <div class="block">
                <el-date-picker
                    v-model="dateValue"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="5">
              <div style="margin: 5px">关键词（选填）</div>
              <el-autocomplete
                  class="inline-input"
                  v-model="keyword"
                  :fetch-suggestions="querySearch"
                  placeholder="机场/火车站/酒店名称..."
                  @select="handleSelect"
              ></el-autocomplete>
            </el-col>
            <el-col :span="5">
              <div style="margin: 5px">酒店级别</div>
              <el-select v-model="level" multiple placeholder="酒店级别">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-button type="primary" icon="el-icon-search"
                     style="font-size: 18px; width: 122px;height: 61px;border-radius: 10px;margin-left: 20px"
                     @click="load(1)">
            搜索
          </el-button>
        </div>
      </el-card>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 5px">
        <el-table ref="userTable" :data="tableData" stripe
                  :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
          <el-table-column prop="id" label="序号" align="center"></el-table-column>
          <el-table-column prop="url" label="图片">
            <template v-slot="scope">
              <div style="display: flex;align-items: center">
                <el-image style="width: 50px;height: 50px;border-radius: 50%" v-if="scope.row.id"
                          :src="`http://localhost:8000/hotel_image_download/${scope.row.id}`" :preview-src-list="[scope.row.id]"></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="酒店"></el-table-column>
          <el-table-column prop="location" label="地址"></el-table-column>
          <el-table-column prop="level" label="等级"></el-table-column>
          <el-table-column prop="price" label="最低价"></el-table-column>
          <el-table-column label="操作" width="150%" align="center">
            <template v-slot="scope">
              <el-button size="mini" type="danger" plain @click="Detail(scope.row.id)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="page_id"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="page_size"
              layout="total,  prev, pager, next"
              :total="page_total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "hotelList",
  data() {
    return {
      options: [{
        value: '1',
        label: '一星'
      }, {
        value: '2',
        label: '二星'
      }, {
        value: '3',
        label: '三星'
      }, {
        value: '4',
        label: '四星'
      }, {
        value: '5',
        label: '五星'
      }],
      tableData: [],
      restaurantsCity: [],
      restaurants: [],
      cityKeyword: "",//城市
      dateValue: "",
      keyword: "",//关键字
      level: '',//级别
      searchHotels: [],
      page_id: 1,//当前的页码
      page_size: 5,//每页显示的个数
      page_total: 0,
      audited: true
    }
  },
  //计算时间
  computed: {
    formattedStartDate() {
      if (this.dateValue) {
        const startDate = this.dateValue[0];
        const year = startDate.getFullYear();
        const month = String(startDate.getMonth() + 1).padStart(2, '0');
        const day = String(startDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    formattedEndDate() {
      if (this.dateValue) {
        const endDate = this.dateValue[1];
        const year = endDate.getFullYear();
        const month = String(endDate.getMonth() + 1).padStart(2, '0');
        const day = String(endDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    duration() {
      if (this.dateValue) {
        const diff = Math.ceil((this.dateValue[1] - this.dateValue[0]) / (1000 * 60 * 60 * 24));
        return `${diff}`;
      } else {
        return '';
      }
    },

  },
  methods: {
    load(page_id) {  //分页查询
      if (page_id) this.page_id = page_id
      console.log("level",this.level)
      this.$request.post('/hotel_search/', {
            "page_id": this.page_id,
            "page_size": this.page_size,
            "location": this.cityKeyword,
            "hotel_name ": this.keyword,
            "keyword": this.keyword,
            "level": this.level,
            "audited": this.audited,
          }
      ).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.hotel_list
          this.page_total = res.data.item_amount
          console.log("res",res.data.hotel_list)
        } else if (res.code === '501') {
          this.$message.info("暂无酒店")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(page_id) {//下一页
      this.load(page_id)
    },
    Detail(id) {//查看详情，传送酒店id到/hotelDetail
      this.$router.push({
        path: '/hotelDetail',
        query: {
          id: id
        }
      })
    },
    //下拉列表设置
    querySearchCity(queryString, cb) {
      var restaurantsCity = this.restaurantsCity;
      var results = queryString ? restaurantsCity.filter(this.createFilterCity(queryString)) : restaurantsCity;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilterCity(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadCityAll() {
      return [
        {"value": "上海"},
        {"value": "南京"},
        {"value": "苏州"},
        {"value": "杭州"},
        {"value": "淮安"},
      ];
    },
    loadAll() {
      return [
        {"value": "机场"},
        {"value": "火车站"},
        {"value": "景区"},
        {"value": "医院"},
      ];
    },
    handleSelectCity(item) {
      console.log(item);
    },
    handleSelect(item) {
      console.log(item);
    },
    //搜索请求
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.restaurantsCity = this.loadCityAll();
    this.cityKeyword = this.$route.query.cityKeyword
    this.dateValue = [
      new Date(this.$route.query.formattedStartDate),
      new Date(this.$route.query.formattedEndDate)
    ];
    this.keyword = this.$route.query.keyword
    this.level = this.$route.query.level || ''
    console.log("cityKeyword",this.cityKeyword)
    console.log("dateValue",this.dateValue)
    console.log("keyword",this.keyword)
    console.log("level",this.level)
  },
  // 获取关键字
  created() {
    this.load()
  }
}
</script>
<style scoped>

</style>